<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="150px">
			<el-form-item label="商品规格：" class="pt10" v-if="false">
				<section style="display: flex; flex-direction: column;">
					<section>
						<el-col v-for="(item, index) of goodsInfoData.specList" :key="index" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<section class="specItemBox">
								<el-input v-model="item.name" class="width180" placeholder="请输入规格名称"  />
								<el-icon size="20" color="#999" class="close-tag" @click="delSpec(index)">
									<CircleCloseFilled />
								</el-icon>
							</section>
							<div class="ml20 mt15 flex">
								<span style="border-left: 1px solid #cdd0d6;border-bottom: 1px solid #cdd0d6;width: 20px;height: 20px;margin-right: 20px"></span>
								<section class="flex" style="flex-wrap: wrap;">
									<section class="mr20 mb20 specItemBox" style="position: relative;width: min-content;" v-for="(item1, index1) of item.childItem" :key="index1">
										<el-input v-model="item1.name" class="width180" placeholder="请输入规格值" />
										<el-icon size="20" color="#999" class="close-tag" @click="delSpecItem(index,index1)">
											<CircleCloseFilled />
										</el-icon>
									</section>
									<el-button type="primary" @click="addSpecItemChildFun(index)">添加规格值</el-button>
								</section>
							</div>
						</el-col>
						<el-col :span="24" class="mb20">
							<el-button type="primary"  @click="addSpecFun">添加规格项</el-button>
							<el-button type="primary"  @click="tplDialogFun()">快捷模板</el-button>
						</el-col>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="储值卡属性：">
				<el-table :data="goodsInfoData.skuList" border>
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="零售价" show-overflow-tooltip>
						<template v-slot:header>
							零售价
							<el-popover placement="top-start" trigger="hover"
								content="商品销售价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.retailPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.retailPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="划线价" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							划线价
							<el-popover placement="top-start" trigger="hover"
								content="线上展示使用，建议填写商品指导价">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.referencePrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.referencePrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="最低价" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(1)">
						<template v-slot:header>
							最低价
							<el-popover placement="top-start" trigger="hover"
								content="商品控价价格，低于该价格商品禁止销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.lowPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.lowPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="成本价" show-overflow-tooltip>
						<template v-slot:header>
							成本价
							<el-popover placement="top-start" trigger="hover"
								content="商品成本价格，用来核算商品利润，不填写则无法核算利润">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.costPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.costPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="储值卡金额" show-overflow-tooltip>
						<template v-slot:header>
							储值卡金额
							<el-popover placement="top-start" trigger="hover"
								content="储值卡卡金额">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skus.${scope.$index}.cardValue`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.cardValue" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="有效期" show-overflow-tooltip>
						<template v-slot:header>
							有效期
							<el-popover placement="top-start" trigger="hover"
								content="储值卡有效期">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skus.${scope.$index}.useTime`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'},  {pattern: /^[1-9]\d*$/, message: '请输入正确的数量', trigger: 'blur' }]">
								<el-input style="width: auto;" v-model="scope.row.usableDuration" placeholder="请输入">
									<template #append>
										<el-select class="width70" v-model="scope.row.usableDurationUnit" >
											<el-option label="日" :value=0 />
											<el-option label="月" :value=1 />
											<el-option label="年" :value=2 />
										</el-select>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="虚拟库存" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							虚拟库存
							<el-popover placement="top-start" trigger="hover"
								content="线上销售使用，不记录真实库存中。当虚拟库存为0时，线上将无法销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skus.${scope.$index}.stock`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'},{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input v-model="scope.row.stock" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="线下销量"  show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							线下销量
							<el-popover placement="top-start" trigger="hover"
								content="线上销量展示使用，可以填写商品在线下渠道或其他渠道的总销量">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skus.${scope.$index}.offlineSales`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'},{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input v-model="scope.row.offlineSales" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="是否赠金" show-overflow-tooltip>
						<template v-slot:header>
							是否赠金
							<el-popover placement="top-start" trigger="hover"
								content="储值卡充值是否有赠送金额">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<el-switch v-model="scope.row.isGift" />
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="储值卡赠金：" v-if="goodsInfoData.skuList.length > 0">
				<el-table :data="goodsInfoData.skuList" border >
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="赠送金额"  >
						<template v-slot:header>
							赠送金额
							<el-popover placement="top-start" trigger="hover"
								content="储值卡赠送金额">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<el-form-item v-if="scope.row.isGift" :prop="`skus.${scope.$index}.giftValue`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.giftValue" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金到账类型"  >
						<template v-slot:header>
							赠金到账类型
							<el-popover placement="top-start" trigger="hover"
								content="赠金到账类型">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<el-form-item v-if="scope.row.isGift" :prop="`skus.${scope.$index}.giftAccountType`" >
								<el-select v-model="scope.row.giftAccountType" placeholder="请选择到账类型" style="width: auto;">
									<el-option label="一次到账" :value=0 :key=0 />
									<el-option label="周期到账" :value=1 :key=1 />
								</el-select>
							</el-form-item>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金到账方式"  >
						<template v-slot:header>
							赠金到账方式
							<el-popover placement="top-start" trigger="hover"
								content="赠金到账方式设置">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<el-button v-if="scope.row.giftAccountType == 1 && scope.row.isGift" link type="primary" @click="bonusTypeDialogFun(scope.$index)">到账设置</el-button>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金使用类型"   show-overflow-tooltip>
						<template v-slot:header>
							赠金使用类型
							<el-popover placement="top-start" trigger="hover"
								content="赠金使用类型">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<!-- <el-form-item v-if="scope.row.isBonusPrice"  :prop="`skus.${scope.$index}.cardBonusPriceUseType`" 
								:rules="[{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}]">
								<el-select v-model="scope.row.cardBonusPriceUseType" multiple placeholder="请选择使用类型" class="width120">
									<el-option label="全部商品" :disabled="scope.row.cardBonusPriceUseType.includes(1) || scope.row.cardBonusPriceUseType.includes('2')" :value=0 :key=0 />
									<el-option label="商品类型" :disabled="scope.row.cardBonusPriceUseType.includes(0) " :value=1 :key=1 />
									<el-option label="指定商品" :disabled="scope.row.cardBonusPriceUseType.includes(0) " :value=2 :key=2 />
								</el-select>
							</el-form-item> -->
							<el-button v-if="scope.row.isGift" link type="primary" @click="userTypeDialogFun('cardBonusPriceUseType')">使用类型</el-button>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金使用范围"  >
						<template v-slot:header>
							赠金使用范围
							<el-popover placement="top-start" trigger="hover"
								content="赠金使用范围">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<section v-if="scope.row.isGift">
								<span v-if="scope.row.cardBonusPriceUseType.includes(0)">全部商品</span>
								<section v-else-if="scope.row.cardBonusPriceUseType.includes(1) || scope.row.cardBonusPriceUseType.includes(2)">
									<el-button v-if="scope.row.cardBonusPriceUseType.includes(1)" link type="primary"  
										@click="userTypeSettingFun(scope.$index, 'handselUserType')">
										类型设置
									</el-button>
									<span v-if="scope.row.cardBonusPriceUseType.includes(1) && scope.row.cardBonusPriceUseType.includes(2)"> | </span>
									<el-button v-if="scope.row.cardBonusPriceUseType.includes(2)" link type="primary"  
										@click="userTypeSettingFun(scope.$index, 'handselUseSku')">
										商品设置
									</el-button>
								</section>
								<span v-else> -- </span>
							</section>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金折扣类型"   show-overflow-tooltip>
						<template v-slot:header>
							赠金折扣类型
							<el-popover placement="top-start" trigger="hover"
								content="赠金折扣类型">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<!-- <el-form-item v-if="scope.row.isBonusPrice"  :prop="`skus.${scope.$index}.cardBonusPriceDiscountType`" 
								:rules="[{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}]">
								<el-select v-model="scope.row.cardBonusPriceDiscountType" multiple placeholder="请选择折扣类型" class="width120">
									<el-option label="不参与折扣" :value=0 :key=0
										:disabled="scope.row.cardBonusPriceDiscountType.includes(1) || 
										scope.row.cardBonusPriceDiscountType.includes(2) || 
										scope.row.cardBonusPriceDiscountType.includes(4)"/>
									<el-option label="通用商品" :disabled="scope.row.cardBonusPriceDiscountType.includes(0)" :value=1 :key=1 />
									<el-option label="商品类型" :disabled="scope.row.cardBonusPriceDiscountType.includes(0)" :value=2 :key=2 />
									<el-option label="指定商品" :disabled="scope.row.cardBonusPriceDiscountType.includes(0)" :value=4 :key=4 />
									</el-select>
							</el-form-item> -->
							<el-button v-if="scope.row.isGift" link type="primary" @click="userTypeDialogFun('cardBonusPriceDiscountType')">折扣类型</el-button>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
					<el-table-column label="赠金折扣设置"  >
						<template v-slot:header>
							赠金折扣设置
							<el-popover placement="top-start" trigger="hover"
								content="赠金折扣设置">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<section v-if="scope.row.isGift">
								<span v-if="scope.row.cardBonusPriceDiscountType.includes(0)"> -- </span>
								<section v-else-if="scope.row.cardBonusPriceDiscountType.includes(1) || scope.row.cardBonusPriceDiscountType.includes(2) || scope.row.cardPriceDiscountType.includes(4)">
									<el-button v-if="scope.row.cardBonusPriceDiscountType.includes(2)" link type="primary"  
										@click="userTypeSettingFun(scope.$index, 'handselDiscountType')">
										类型设置
									</el-button>
									<span v-if="scope.row.cardBonusPriceDiscountType.includes(2) && (scope.row.cardBonusPriceDiscountType.includes(4) || scope.row.cardPriceDiscountType.includes(1))"> | </span>
									<el-button v-if="scope.row.cardBonusPriceDiscountType.includes(1) || scope.row.cardBonusPriceDiscountType.includes(4)" link type="primary"  
										@click="userTypeSettingFun(scope.$index, 'handselDiscountSku')">
										商品设置
									</el-button>
								</section>
								<span v-else> -- </span>
							</section>
							<span v-else>
								--
							</span>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="储值卡其它：">
				<el-table :data="goodsInfoData.skuList" border >
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="使用类型" show-overflow-tooltip>
						<template v-slot:header>
							储值卡使用类型
							<el-popover placement="top-start" trigger="hover"
								content="储值卡使用类型">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-button link type="primary" @click="userTypeDialogFun('cardPriceUseType')">使用类型</el-button>
						</template>
					</el-table-column>
					<el-table-column label="使用范围"  >
						<template v-slot:header>
							储值卡使用范围
							<el-popover placement="top-start" trigger="hover"
								content="储值卡使用范围">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<span v-if="scope.row.cardPriceUseType.includes(0)">全部商品</span>
							<section v-else-if="scope.row.cardPriceUseType.includes(1) || scope.row.cardPriceUseType.includes(2)">
								<el-button v-if="scope.row.cardPriceUseType.includes(1)" link type="primary"
									@click="userTypeSettingFun(scope.$index, 'useType')">
									类型设置
								</el-button>
								<span v-if="scope.row.cardPriceUseType.includes(1) && scope.row.cardPriceUseType.includes(2)"> | </span>
								<el-button v-if="scope.row.cardPriceUseType.includes(2)" link type="primary" 
									@click="userTypeSettingFun(scope.$index, 'useSku')">
									商品设置
								</el-button>
							</section>
							<span v-else> -- </span>
						</template>
					</el-table-column>
					<el-table-column label="折扣类型"   show-overflow-tooltip>
						<template v-slot:header>
							储值卡折扣类型
							<el-popover placement="top-start" trigger="hover"
								content="储值卡折扣类型">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<el-button link type="primary" @click="userTypeDialogFun('cardPriceDiscountType')">折扣类型</el-button>
						</template>
					</el-table-column>
					<el-table-column label="折扣设置"  >
						<template v-slot:header>
							储值卡折扣设置
							<el-popover placement="top-start" trigger="hover"
								content="储值卡折扣设置">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template #default="scope">
							<span v-if="scope.row.cardPriceDiscountType.includes(0)"> -- </span>
							<section v-else-if="scope.row.cardPriceDiscountType.includes(1) || scope.row.cardPriceDiscountType.includes(2) || scope.row.cardPriceDiscountType.includes(4)">
								<el-button v-if="scope.row.cardPriceDiscountType.includes(2)" link type="primary"  
									@click="userTypeSettingFun(scope.$index, 'discountType')">
									类型设置
								</el-button>
								<span v-if="scope.row.cardPriceDiscountType.includes(2) && (scope.row.cardPriceDiscountType.includes(4) || scope.row.cardPriceDiscountType.includes(1))"> | </span>
								<el-button v-if="scope.row.cardPriceDiscountType.includes(1) || scope.row.cardPriceDiscountType.includes(4)" link type="primary"  
									@click="userTypeSettingFun(scope.$index, 'discountSku')">
									商品设置
								</el-button>
							</section>
							<span v-else> -- </span>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<section style="text-align: center; margin: 50px 0;">
				<el-button type="primary" @click="previousStep">上一步</el-button>
				<el-button type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
			</section>
		</el-form>
		<chuzhikaTypeSettingDialog ref="chuzhikaTypeSettingDialogRef" @useTypeFun="useTypeFun"/>
		<relevanceGoodDialog ref="relevanceGoodDialogRef" @selectItemFun="selectItemFun" />
		<paymentMethodDialog ref="paymentMethodDialogRef" @selectItemPaymentFun="selectItemPaymentFun"/>
		<useTypeDialog ref="useTypeDialogRef" @useTypeListFun="useTypeListFun" />
		<tplDialog ref="tplDialogRef"  @selectSpecFun="selectSpecFun"/>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { Plus,CircleCloseFilled, QuestionFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import '/@/theme/tableTool.scss';
import { templateList, } from "/@/api/commodity";
import { ElMessage } from 'element-plus';
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()
const relevanceGoodDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/relevanceGoodDialog.vue'))
const paymentMethodDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/paymentMethodDialog.vue'))
const chuzhikaTypeSettingDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/chuzhikaTypeSettingDialog.vue'))
const tplDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/tplDialog.vue'))
const useTypeDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/useTypeDialog.vue'))
const relevanceGoodDialogRef = ref()
const paymentMethodDialogRef = ref()
const chuzhikaTypeSettingDialogRef = ref()
const useTypeDialogRef = ref()
const tplDialogRef = ref()
const emit = defineEmits(['stepChange'])

const ruleFormRef = ref<FormInstance>()
const state = reactive({
	loading: false,
	operateIndex:0,
	isAddSpecs: false,
	// 可用模板列表
	specTemplateList: [] as Array<any>,
})

const rules = reactive<FormRules<any>>({
})

// 获取可用模板
const getTemplateList = async () => {
	let param = {
		pageNum:1,
		pageSize:100,
		typeId: 4,
	}
	const { results } = await templateList(param);
	state.specTemplateList = results.records
}

// 储值卡赠金到账方式 分批到账设置
const bonusTypeDialogFun = (index: Number) => {
	console.log(goodsInfoData.skuList[0])
	paymentMethodDialogRef.value.openDialog(goodsInfoData.skuList[0].giftAccountValueList);
}

// 储值卡赠金到账方式返回值
const selectItemPaymentFun = (data:any) => {
	goodsInfoData.skuList[0].giftAccountValueList = data;
}


// 使用类型选择弹窗
const userTypeDialogFun = (type: string) => {
	useTypeDialogRef.value.openDialog(type,goodsInfoData.skuList[0][type]);
}

// 使用类型判断
const useTypeListFun = (type: string, data:any) => {
	if(type == 'cardPriceUseType'){
		goodsInfoData.skuList[0].cardPriceUseType = data;
	}else if(type == 'cardPriceDiscountType'){
		goodsInfoData.skuList[0].cardPriceDiscountType = data;
	}else if(type == 'cardBonusPriceUseType'){
		goodsInfoData.skuList[0].cardBonusPriceUseType = data;
	}else if(type == 'cardBonusPriceDiscountType'){
		goodsInfoData.skuList[0].cardBonusPriceDiscountType = data;
	}
}

// 储值卡金额使用范围设置
const userTypeSettingFun = (index: number, type:string) =>{
	state.operateIndex = index;
	if(type == 'useType'){ // 使用类型设置
		chuzhikaTypeSettingDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindTypeUseList);
	}else if(type == 'discountType'){ //折扣类型设置
		chuzhikaTypeSettingDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindTypeDiscountList);
	}else if(type == 'handselUserType'){ //赠金使用类型设置
		chuzhikaTypeSettingDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindTypeHandselUseList);
	}else if(type == 'handselDiscountType'){//赠金折扣类型设置
		chuzhikaTypeSettingDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindTypeHandselDiscountList);
	}else if(type == 'useSku'){//可使用商品设置
		relevanceGoodDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindSkuUseList);
	}else if(type == 'discountSku'){//可使用商品折扣设置
		relevanceGoodDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindSkuDiscountList);
	}else if(type == 'handselUseSku'){//赠金可使用商品设置
		relevanceGoodDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindSkuHandselUseList);
	}else if(type == 'handselDiscountSku'){//赠金可使用商品折扣设置
		relevanceGoodDialogRef.value.openDialog(type, goodsInfoData.skuList[state.operateIndex].bindSkuHandselDiscountList);
	}
}

// 使用类型回调
const useTypeFun = (type:string, list: any ) =>{
	if(type == 'useType'){ // 使用类型设置
		goodsInfoData.skuList[state.operateIndex].bindTypeUseList = list;
	}else if(type == 'discountType'){ //折扣类型设置
		goodsInfoData.skuList[state.operateIndex].bindTypeDiscountList = list
	}else if(type == 'handselUserType'){ //赠金使用类型设置
		goodsInfoData.skuList[state.operateIndex].bindTypeHandselUseList = list;
	}else if(type == 'handselDiscountType'){//赠金折扣类型设置
		goodsInfoData.skuList[state.operateIndex].bindTypeHandselDiscountList = list
	}
}

// sku管理商品回调
const selectItemFun = (type:String,list:any)  => {
	if(type == 'useSku'){ // 可使用sku设置
		goodsInfoData.skuList[state.operateIndex].bindSkuUseList = list;
	}else if(type == 'discountSku'){ //可折扣sku设置
		goodsInfoData.skuList[state.operateIndex].bindSkuDiscountList = list
	}else if(type == 'handselUseSku'){ //赠金可使用sku设置
		goodsInfoData.skuList[state.operateIndex].bindSkuHandselUseList = list;
	}else if(type == 'handselDiscountSku'){//赠金可折扣sku设置
		goodsInfoData.skuList[state.operateIndex].bindSkuHandselDiscountList = list;
	}
}
// 打开选择模板
const tplDialogFun = () => {
	tplDialogRef.value.openDialog(1)
}

// 选中模板后获取模板内规格项
const selectSpecFun = (tmpData:any) => {
	goodsInfoData.specList = tmpData;
	console.log(goodsInfoData.specList)
	creatSkuList();
};

// 添加规格项
const addSpecFun = () => {
	const item = { name:'#', childItem: [ { id:null, name:'#'}]};
	goodsInfoData.specList.push(item);
	creatSkuList();
}

// 移除某一种规格组
const delSpec = (x:number) => {
	goodsInfoData.specList.splice(x,1)
	creatSkuList();
}

// 移除规格中某一项规格
const delSpecItem = (x:number,y:number)=>{
	goodsInfoData.specList[x].childItem.splice(y,1)
	creatSkuList();
}

// 给规格项中某一项添加规格
const addSpecItemChildFun = (x:number)=>{
	goodsInfoData.specList[x].childItem.push({name:'#'})
	creatSkuList();
}

// 创建商品规格列表
const creatSkuList = async () => {
	const attr = goodsInfoData.specList;
	const skus = calculateCartesianProduct(attr).map((product: any[]) => {  
		const sku = JSON.parse(JSON.stringify(goodsInfoData.multipleData));
		sku.skuSpecList = []
		product.forEach((value: any) => {  
			sku.skuSpecList.push(value)
		});
		return sku;
	});
	goodsInfoData.skuList = skus;
}

// 多规格生成
const calculateCartesianProduct = (attr:any) =>{
	if (attr.length === 0) {
		return [[]]; // 返回一个空数组，表示没有属性可选
	} else {
		const firstAttribute = attr[0];
		const remainingAttributes = attr.slice(1);
		const firstAttributeValues = firstAttribute.childItem;
		const remainingProduct = calculateCartesianProduct(remainingAttributes);
		return firstAttributeValues.flatMap((value: any) => remainingProduct.map((product: any) => [value].concat(product)));
	}
}




// 批量添加数据
const batchAdd = () =>{
	if(goodsInfoData.skuList.length > 0){
		goodsInfoData.skuList.map((obj:any) =>{
			// let batchData = state.batchSettingsTable[0]
			// obj.skuImgUrl = batchData.skuImgUrl;
			// obj.retailPrice = batchData.retailPrice;
			// obj.referencePrice = batchData.referencePrice;
			// obj.lowPrice = batchData.lowPrice;
			// obj.costPrice = batchData.costPrice;
			// obj.unit = batchData.unit;
			// obj.stock = batchData.stock;
			// obj.warnStock = batchData.warnStock;
			// obj.offlineSales = batchData.offlineSales;
			// obj.merchantCode = batchData.merchantCode;
			// obj.barCode = batchData.barCode;
			// obj.relatedSku = obj.relatedSku.length == 0 ? batchData.relatedSku : obj.relatedSku;
		})
	}else{
		ElMessage({
			type: 'warning',
			message: '请先添加规格项',
		})
	}
}

// 页面加载时
onMounted(() => {
	// 获取规格模板列表
	getTemplateList();
});

// 上一步
const previousStep = () => {
	emit('stepChange', 'first')
}

// 下一步
const nextStep = async (formEl: FormInstance | undefined) => {
	if(goodsInfoData.skuList.length == 0){
		return ElMessage.warning('暂无商品规格');
	}
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			emit('stepChange', 'third')
		} else {
			ElMessage.warning('请补全商品信息');
		}
	})
}
</script>

<style lang="scss" scoped>
@import '../../../../theme/other.scss';
.base-info-content {
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.specItemBox{
		position: relative;
		width: min-content
	}
	.specItemBox .close-tag{
		position: absolute;
		cursor: pointer;
		top:-6px; 
		right:-6px;
		display: none;
	}

	.specItemBox:hover .close-tag {
		display: inline; /* 鼠标悬浮时显示关闭标签 */
	}
}
</style>
